<template>
  <div class="shop-container">
    <div class="table-search-columns" v-show="showSearch">
      <a-form-model class="machine-info-search-form" ref="query" :model="query">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="名称" prop="name">
              <a-input v-model="query.name" allowClear/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="类型" prop="type">
              <a-select v-model="query.type" placeholder="全部" allowClear mode="multiple">
                <a-select-option value="web服务器">web服务器</a-select-option>
                <a-select-option value="消息队列">消息队列</a-select-option>
                <a-select-option value="网络">网络</a-select-option>
                <a-select-option value="存储">存储</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-item>
              <a-button type="primary" @click.native.prevent="getList()">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <!-- 工具栏 -->
    <div class="table-tools-bar">
      <!-- 左侧 -->
      <div class="tools-fixed-left">
        <span class="table-title">商城应用</span>
      </div>
      <!-- 右侧 -->
      <div class="tools-fixed-right">
        <search-toolbar :showSearch.sync="showSearch" @refresh="getList()"></search-toolbar>
      </div>
    </div>
    <a-row :gutter="[24, 16]" class="items-container">
      <a-col :xs="24" :sm="20" :md="16" :lg="12" :xl="8" v-for="item of goods" :key="item.name">
        <a-card :hoverable="true" class="card" @click="goToInstall(item.id)">
          <div class="info-top">
            <div class="img-container">
              <img :src="item.path" :alt="item.name" width="48" v-if="item.path"/>
              <div v-else class="char-icon">{{item.name[0].toUpperCase()}}</div>
            </div>
            <div class="item-info">
              <div class="item-name">{{item.name}}</div>
              <div class="item-description">{{item.description}}</div>
            </div>
          </div>
          <div class="info-bottom">
            <div>开发者: {{item.creator}}</div>
            <div>最新: {{item.version}}</div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import toolbar from '@/mixins/search-toolbar-mixin'
  import dockerImg from '../../assets/docker.png'
  import elasticsearchImg from '../../assets/elasticsearch.png'
  import gitImg from '../../assets/git.png'
  import jdkImg from '../../assets/jdk.png'
  import mavenImg from '../../assets/maven.png'
  import mysqlImg from '../../assets/mysql.png'
  import nodejsImg from '../../assets/nodejs.png'
  import phpImg from '../../assets/php.png'
  import rabbitmqImg from '../../assets/rabbitmq.png'
  import redisImg from '../../assets/redis.png'
  import tomcatImg from '../../assets/tomcat.png'

  export default {
    name: "index",

    mixins: [toolbar],

    data() {
      return {
        goods: [
          {id: 1, name: 'Tomcat', path: tomcatImg, description: 'Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目', creator: 'admin', version: '1.1.1'},
          {id: 2, name: 'elasticsearch', path: elasticsearchImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 3, name: 'git', path: gitImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 4, name: 'jdk', path: jdkImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 5, name: 'maven', path: mavenImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 6, name: 'mysql', path: mysqlImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 7, name: 'nodejs', path: nodejsImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 8, name: 'php', path: phpImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 9, name: 'rabbitmq', path: rabbitmqImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 10, name: 'redis', path: redisImg, description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 11, name: 'dm8', path: '', description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'},
          {id: 12, name: 'shentong', path: '', description: 'MySQL是一个关系型数据库管理系统，由瑞典MySQLAB公司开发', creator: 'admin', version: '1.1.1'}
        ],
        query: {
          name: '',
          type: []
        }
      }
    },

    methods: {
      resetForm() {
        this.$refs.query.resetFields()
        // this.getList({})
      },

      goToInstall(id) {
        this.$router.push({path: `/software-shop/detail/${id}`})
      }
    }
  }
</script>

<style lang="less" scoped>
  .shop-container {

  }
    .items-container {
      width: 100%;
      padding: 0 12px 0 24px;
      margin-top: 10px;
    }
      /deep/ .ant-card {
        border-radius: 25px;
      }
      /deep/ .ant-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px 0 rgb(36 46 66 / 20%);
        border: 1px solid #79879c;
        color: #0073ff;

      }
        /deep/ .ant-card-body {
          height: 152px;
          padding: 6px 24px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
          .info-top{
            display: flex;
            height: 64px;
          }
            .img-container {
              width: 48px;
              height: 64px;
              display: flex;
              align-items: center;
            }
              .char-icon {
                height: 48px;
                width: 48px;
                border-radius: 5px;
                font-size: 24px;
                font-weight: bold;
                line-height: 48px;
                text-align: center;
                background-color: #eff4f9;
              }
            .item-info {
              margin-left: 32px;
            }
              .item-name {
                margin-bottom: 5px;
                font-weight: bold;
              }
              .item-description {
                color: #79879c;
                font-size: 12px;
              }
          .info-bottom {
            height: 18px;
            display: flex;
            justify-content: space-between;
            color: #79879c;
            font-size: 12px;
          }


</style>
